/**
* @Description: 签约页面
* @author Administrator
*/

<template>
	<view class="u-wrap">
		<u-row>
			<u-col span="3">
				<!-- 左侧导航栏 -->
				<sign-left-menu @changeWeekDay="changeWeekDay($event)"></sign-left-menu>
			</u-col>

			<u-col span="9">
				<!-- 右侧菜单列表 -->
				<template v-if="menuList.length">
					<sign-right-menu ref="rightMenu" :menuList="menuList" :date="date"></sign-right-menu>
				</template>
				<template v-else>
					<view class="empty">
						<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
						<view class="explain">
							<view class="tips">暂无菜单~</view>
						</view>
					</view>
				</template>
			</u-col>
		</u-row>
		
		<wyb-loading ref="loading"/>
	</view>
</template>

<script>
	import * as api from "@/api/apiList/home.js"

	import signLeftMenu from './components/signLeftMenu'
	import signRightMenu from "./components/signRightMenu/signRightMenu"

	import {
		getWeek
	} from "@/utils/getWeekDay.js"
	import {
		formDate
	} from "@/utils/formDate.js"

	export default {
		components: {
			signLeftMenu, //签约-左侧菜单
			signRightMenu //签约-右侧菜单
		},
		provide: {
			isSign: true, //是否签约
		},
		data() {
			return {
				menuList: [], //菜单列表
				date: formDate(new Date()), //日期 默认今天
				isCurrentDay: false //是否是今天
			}
		},
		watch: {
			date: { //监听日期
				async handler(val) {
					this.getList(val)
				},
				immediate: true
			},
		},
		methods: {
			async API_list(day = formDate(new Date())) { //获取菜单
				let result = {
					param: {
						day //日期 格式：yyyy-MM-dd
					}
				}
				return await api.list(result)
			},
			changeWeekDay(date) { //获取日期
				this.date = date
			},
			async getList(val){//获取列表
				this.$nextTick(()=>{
					this.$refs.loading.showLoading() // 显示
				})
				
				let res = await this.API_list(val) //调用接口获取当天菜单
				// console.log(res)
				this.menuList = res.data.data.menus
				this.date = val
				this.$refs.loading.hideLoading() // 隐藏
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: 100%;
		.empty {
			height: 100%;
			min-height: 400px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		
			image {
				width: 164rpx;
				height: 164rpx;
				border-radius: 50%;
				margin-bottom: 10rpx;
			}
		
			.tips {
				color: #999999;
			}
		}
	}

	.u-row {
		/deep/.u-col-3{
			padding: 0;
		}
	}

	.lunchOrDinner {
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2px;
		margin-bottom: 5rpx;
		color: #FFFFFF;
		background-color: #F43A3D;
	}
</style>
